import { useState } from 'react'
import { Input, Button, Card, List, Space } from 'antd'
import { SendOutlined } from '@ant-design/icons'
import styles from './index.module.less'

interface Message {
  id: string
  content: string
  role: 'user' | 'assistant'
  timestamp: Date
}

function ChatPage() {
  const [messages, setMessages] = useState<Message[]>([])
  const [inputValue, setInputValue] = useState('')
  const [loading, setLoading] = useState(false)
  
  const handleSend = async () => {
    if (!inputValue.trim()) return
    
    const userMessage: Message = {
      id: Date.now().toString(),
      content: inputValue,
      role: 'user',
      timestamp: new Date(),
    }
    
    setMessages([...messages, userMessage])
    setInputValue('')
    setLoading(true)
    
    // 模拟 AI 响应
    setTimeout(() => {
      const aiMessage: Message = {
        id: (Date.now() + 1).toString(),
        content: `这是对 "${inputValue}" 的模拟响应。请配置后端 API 以获得真实的 AI 响应。`,
        role: 'assistant',
        timestamp: new Date(),
      }
      setMessages(prev => [...prev, aiMessage])
      setLoading(false)
    }, 1000)
  }
  
  return (
    <div className={styles.chatContainer}>
      <Card title="AI 对话" className={styles.chatCard}>
        <div className={styles.messageList}>
          <List
            dataSource={messages}
            renderItem={(item) => (
              <List.Item className={styles[item.role]}>
                <div className={styles.messageContent}>
                  {item.content}
                </div>
              </List.Item>
            )}
          />
          {loading && (
            <div className={styles.loading}>
              AI 正在思考中...
            </div>
          )}
        </div>
        <div className={styles.inputArea}>
          <Space.Compact style={{ width: '100%' }}>
            <Input
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              onPressEnter={handleSend}
              placeholder="输入您的问题..."
              disabled={loading}
            />
            <Button
              type="primary"
              icon={<SendOutlined />}
              onClick={handleSend}
              loading={loading}
            >
              发送
            </Button>
          </Space.Compact>
        </div>
      </Card>
    </div>
  )
}

export default ChatPage